<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拍卖预展详情</title>
<link href="../style/common.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>

<style type="text/css">
	.paintingOuter{width: 100%;background-color: #666666;margin-top: 10px;margin-bottom: 10px;font-family: 宋体;font-size: 14px;} 
	.main{ width:960px; margin:0 auto; text-align:center;margin-top: 10px;}
	.container{position:relative;}
	.preImg{position:absolute; left:-24px;top:150px; }
	.nextImg{position:absolute; right:-24px; top:150px;}
	.imgBox{ width:910px; overflow:hidden;margin:0 auto;padding-bottom: 20px; }
	
	#paintingDetailDiv{visibility:hidden;z-index:410;position:absolute;background:#FFF;filter:alpha(opacity=75);}
	#paintingDetailDiv p{line-height:30px;margin-top: 10px;margin-bottom: 10px;font-family: 宋体;font-size: 14px;text-align: center;}
	
	.imgList{ overflow:hidden; position:relative; width:960px; height:45px;margin:0 auto;margin-bottom:10px;}
	.preBtn{ width:16px; height:35px;position:absolute; left:0px; padding-top:17px;background:#666666;}
	.nextBtn{ width:16px; height:35px;position:absolute; right:0px;padding-top:17px;background:#666666;}
	.imgsBox{height:22px; position:absolute; left:17px; top:15px; text-align:left;overflow:hidden;}
	.cur_img_1{width: 30px;height: 20px;float:left;border:1px solid #ccc;cursor: pointer;margin-right:10px;background: #cccccc;font-family: 宋体;font-size: 12px;text-align: center;}
	.cur_img{width: 30px;height: 20px;float:left;border:1px solid #ff9900;cursor: pointer;margin-right:10px;background: #cccccc;font-family: 宋体;font-size: 12px;text-align: center;}
	.cur_img_1:hover{border:1px solid #ff9900;}
	
	.arrow_painter {font-family: "幼圆";font-size: 20px;text-transform: none;color: #cccccc;font-weight: bold;}
	
</style>

<script type="text/javascript">

var auctionImages = ${requestScope.ajaxData};

function init(){

	var len = auctionImages.length;
	var index_auction = 0;

	if(len > 0 ){
		$(".imgBox img").attr("src",'${img_server }/auction/' + auctionImages[0].id+'.'+auctionImages[0].suffix);
	}

	var imgsBoxDiv = document.getElementById("imgsBoxDiv");
	var htmlStr = "";
 	for(var i= 0;i<len;i++){
		 var pageNo = parseInt(i)+1;
		 var imagePath = '${img_server }/auction/' + auctionImages[i].id+'.'+auctionImages[i].suffix;
		 var sharpId = auctionImages[i].sharpId;
		if( i == 0 ){
			if(sharpId == 100){
				index_auction++;
				htmlStr += '<div class="cur_img"><span title="'+imagePath +'" style="line-height:20px;">目录'+index_auction+'</span></div>';
			}else{
				htmlStr += '<div class="cur_img"><span title="'+imagePath +'" style="line-height:20px;">封面</span></div>';
			}
		}else{
			if(sharpId == 100){
				index_auction++;
				htmlStr += '<div class="cur_img_1"><span title="'+imagePath +'" style="line-height:20px;">目录'+index_auction+'</span></div>';
			}else{
				htmlStr += '<div class="cur_img_1"><span title="'+imagePath +'" style="line-height:20px;">'+pageNo+'页</span></div>';
			}
		}
	}

 	imgsBoxDiv.innerHTML = htmlStr ;
}

</script>

</head>

<body>

<%@include file="/commons/head.jsp"%>

<div class="paintingOuter">

<!-- begin imgList-->
	<div class="imgList">
		<div class="preBtn"><span class="arrow_painter">&lt;</span></div>
		<div class="imgsBox"  id="imgsBoxDiv"></div>
		<div class="nextBtn"><span class="arrow_painter">&gt;</span></div>
	</div>
<!--end imgList-->


<!--begin main-->
<div class="main">
	<!-- begin container-->
		<div class="container">
			<div class="preImg"><img border="0" src="../images/arrow_left.png"/></div>
			<div class="nextImg"><img border="0" src="../images/arrow_right.png"/></div>
			<div class="imgBox"><img src="../images/arrow_left.png"/></div>
		</div>
	<!--end container-->
</div>
<!--end main-->

</div>


</body>

<script type="text/javascript">

$(document).ready(function(){
	init();
	var index=$(".imgsBox>div").index($(".cur_img"));
		$(".preImg").hover(function(){
		//自定义的cursor图案要放到绝对地址才行，有点搞不懂
			$(this).css({cursor:"pointer"});
	});	
	$(".preImg").hover(function(){
   			$(this).css({cursor:"pointer",filter:"alpha(opacity=50)",opacity:"0.50"});
			},function(){
				$(this).css({cursor:"pointer",filter:"alpha(opacity=100)",opacity:"1.0"});
			});	
	$(".nextImg").hover(function(){
			$(this).css({cursor:"pointer",filter:"alpha(opacity=50)",opacity:"0.50"});
			},function(){
				$(this).css({cursor:"pointer",filter:"alpha(opacity=100)",opacity:"1.0"});
			});
	$(".nextBtn").hover(function(){
		$(this).css({cursor:"pointer"});
	});
	$(".preBtn").click(function(){
				setZindex();				
				$(".imgsBox").animate({left:"+=228px"},300,"linear",checkPos);
	});	
	$(".nextBtn").click(function(){
				setZindex();			
				$(".imgsBox").animate({left:"-=228px"},300,"linear",checkPos);//228px为两张图片的位置			
	});
	function checkPos(){
		//alert("callBack");
		if(parseInt($(".imgsBox").css("left"))>33){					
					$(".imgsBox").animate({left:"33px"},300);
				}
		if(parseInt($(".imgsBox").css("left"))<-(parseInt($(".imgsBox").css("width"))-584)){					
				$(".imgsBox").animate({left:-(parseInt($(".imgsBox").css("width")))+584+"px"},300);			
				}	
	}
	$(".imgsBox>div").click(function(){
			    index=$(".imgsBox>div").index($(this));
				$(".imgBox img").attr("src",$(this).find("span").attr("title"));
				showImg();
				$(".cur_img").addClass("cur_img_1").removeClass("cur_img");
				$(this).addClass("cur_img");
	});
	$(".preImg").click(function(){
				setZindex();
				if(index>0){
					index-=1;
				}
				
				$(".imgBox img").attr("src",$(".imgsBox span").eq(index).attr("title"));
				
				showImg();
				if(parseInt($(".imgsBox").css("left"))<33){					
					$(".imgsBox").animate({left:"+=114px"},300,"linear",checkPos);		
				}
				$(this).css({"z-index":"303"});
				$(".nextImg").css({"z-index":"304"});
				$(".cur_img").addClass("cur_img_1").removeClass("cur_img");
				$(".imgsBox>div").eq(index).addClass("cur_img");
	});
	$(".nextImg").click(function(){
				setZindex();
				var len_div = $(".imgsBox>div").length;
				if(index < len_div - 1){
					index+=1;
				}
				
				$(".imgBox img").attr("src",$(".imgsBox span").eq(index).attr("title"));
				
				showImg();
				if(parseInt($(".imgsBox").css("left"))>-(parseInt($(".imgsBox").css("width"))-584)){						
					$(".imgsBox").animate({left:"-=114px"},300,"linear",checkPos);			
				}
				$(".preImg").css({"z-index":"303"});
				$(this).css({"z-index":"304"});
				$(".cur_img").addClass("cur_img_1").removeClass("cur_img");
				$(".imgsBox>div").eq(index).addClass("cur_img");
	});
	function setZindex(){
		$(".preBtn").css({"z-index":"300"});
		$(".nextBtn").css({"z-index":"301"});
	}
	function showImg(){
		$(".imgBox img").css({display:"none"});//先设置display为none，这样下面的渐变切换动画才会有效
		$(".imgBox img").fadeIn();	
	}
	//end
});

</script>

<%@include file="/commons/foot.jsp" %>

</html>
